<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WaterMark</title>
  </head>
  <style>
    li {
      height: 100vh;
    }
  </style>
  <body>
    <div>
      <ul>
        <li>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat natus perferendis odit veritatis sapiente consequatur, accusamus officia, libero, eum ut inventore maxime rem voluptatibus fugit totam facilis. Excepturi, eius dolores?</div>
            <div>Qui quidem officia quo nihil ipsum eaque beatae vero corrupti quos perspiciatis velit unde ipsam quam tenetur deleniti, vel at cupiditate et distinctio ratione reprehenderit perferendis doloremque libero. Nihil, adipisci?</div>
            <div>Voluptatem ut iure veritatis autem totam sed dolorum alias quidem sapiente quo doloremque corporis quae eum sequi, sit ipsam ea voluptatum, aspernatur suscipit. Dolore amet quod odio impedit, doloremque expedita!</div>
            <div>Minus, quasi quaerat. Magnam, at totam adipisci nemo tempore culpa repudiandae, recusandae nobis eos rerum aut excepturi perspiciatis? Molestias ipsa recusandae dolorum neque excepturi, saepe ipsam in atque possimus vitae.</div>
            <div>Eos quas voluptas itaque quasi, sunt molestiae repellendus sit deserunt fuga sint. Aspernatur a dicta consequatur molestiae quo dignissimos magnam sunt nemo eaque illum tempora facere, eius eligendi? Non, expedita.</div>
            <div>Omnis ipsam aperiam voluptatem eveniet accusamus sit debitis vel nisi! Molestiae voluptates, ut dolorum possimus, corporis doloremque beatae mollitia tempore inventore ducimus, dolore placeat debitis nesciunt? Vitae voluptates alias magnam?</div>
            <div>Eveniet repellat repudiandae libero commodi! Autem veniam dicta quos quia alias dolores illo laboriosam quasi quae. Libero, laudantium. Id similique labore repudiandae iste natus quae tempora hic unde nam incidunt!</div>
            <div>Veniam temporibus dolorum dicta assumenda incidunt, voluptatem non beatae praesentium blanditiis quo eum excepturi dolores velit ratione repellat quam alias deserunt voluptas vero tempora architecto sunt. Velit quisquam quas error.</div>
            <div>Modi, nemo sit ut accusamus minus praesentium illo et quisquam dolore dolorem fugit fugiat placeat itaque libero in nam rerum sint magni minima suscipit tempore, explicabo recusandae enim laboriosam? Iusto!</div>
            <div>Ex sit sunt magni odit culpa minima illo rem, suscipit ipsam neque sint eos. Quos voluptatum expedita est odio ipsam, illum voluptates quia corporis, natus amet illo quas eum earum.</div>
            <div>Cupiditate, iure quam? Aut facilis doloribus velit consectetur repellat blanditiis impedit quia id ea at sapiente error, temporibus accusantium in, eos provident tempora, rem natus? Nam animi dolore aliquid enim.</div>
            <div>In minima hic vitae sed itaque cupiditate veritatis error dignissimos aliquid magnam quidem quam iusto voluptatem enim doloremque esse delectus quos, dolore consequuntur commodi, quae adipisci quia qui! Maiores, dolores!</div>
            <div>Alias nulla sequi unde sapiente ullam asperiores, incidunt aspernatur quasi iusto maiores rem ex ad non officiis officia, delectus illum, eaque ipsam consectetur! Inventore, id. Odit ut sit dicta exercitationem!</div>
            <div>Voluptatibus possimus quo vel alias itaque dolorum exercitationem expedita numquam similique perspiciatis? Id nihil quasi maiores adipisci inventore laborum sequi quas, ab, ipsum laudantium, soluta commodi. Eos corrupti officiis quod.</div>
            <div>Provident vero voluptatibus fugit eius maiores harum sint reprehenderit dolor, quae veniam! Distinctio amet esse, magnam veritatis minus neque corrupti illo nulla nesciunt tenetur eaque nostrum ratione ipsa odio cupiditate?</div>
            <div>Ducimus, quidem? Odio aut quia voluptatem quibusdam dolores omnis nisi eos sint consequuntur quaerat reprehenderit quam vel beatae dignissimos animi nesciunt in, accusamus architecto. Similique facere voluptate totam quo ducimus!</div>
            <div>Officia dicta vitae in ut pariatur animi sint dolores voluptate atque libero suscipit repellendus nobis eum debitis distinctio, reiciendis voluptates. Facere, eaque quam magni quibusdam doloremque porro dolore. Ullam, nam?</div>
            <div>Ut accusantium eius nesciunt velit! Modi dolorum nisi magnam. Impedit molestiae consequatur cumque, distinctio obcaecati ea nemo aspernatur sequi. At, facilis corrupti? Itaque illum perferendis suscipit eos, commodi laboriosam reprehenderit.</div>
            <div>Corporis dolorem esse repellendus qui mollitia, consequuntur nemo aliquam iure cupiditate consectetur ullam deserunt assumenda ad porro doloremque excepturi sunt cumque illum aut explicabo quam laboriosam alias. Culpa, dolorem perferendis!</div>
            <div>Amet libero accusamus assumenda id quos fugiat, officiis nisi maiores, ipsum voluptatem perspiciatis dicta, unde error nulla doloremque exercitationem itaque ex sed provident perferendis sapiente accusantium animi sunt! Non, culpa?</div>
        </li>
        <li>
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex assumenda, ipsa aliquid sapiente, excepturi illo nesciunt consequatur distinctio quaerat odio dolores temporibus suscipit ut quisquam quam laboriosam error repellat praesentium.</div>
            <div>Rem consequuntur aliquid perspiciatis tenetur vero modi! Ex ipsa voluptas, mollitia numquam ducimus laudantium! Provident, similique deleniti iure aperiam fugit corporis quasi vel at accusamus delectus blanditiis voluptatibus et. Architecto?</div>
            <div>Asperiores recusandae eligendi dolores voluptate neque. Tempora aliquid tenetur, harum voluptas accusamus sint rem illum distinctio reiciendis nobis dicta iste. Tempora, explicabo culpa! Omnis magnam non quos, pariatur a atque?</div>
            <div>Eos voluptatum porro exercitationem, eum nesciunt quam impedit, blanditiis quod excepturi et, magni ullam alias assumenda rerum ratione natus fuga cumque veritatis cupiditate vel ad tempora quis hic? Enim, odio!</div>
            <div>Adipisci quam vel cupiditate sed nam ratione ab ut minus ipsam, ad placeat veritatis cum inventore vero ipsum incidunt possimus iusto provident. Quo, autem delectus! Quo odio vel sapiente quis!</div>
            <div>Officia nihil voluptatibus in beatae perspiciatis expedita? Id ut quas alias perspiciatis voluptate quidem. Pariatur expedita, ad unde accusamus voluptate nam corporis voluptates quas incidunt hic, architecto quos, sint minima!</div>
            <div>Fugiat officiis voluptates dolorem aut in pariatur recusandae alias laudantium voluptate ab accusamus quia ea neque odio obcaecati doloremque, omnis exercitationem repudiandae rerum veritatis! Vitae ipsum incidunt sapiente adipisci similique?</div>
            <div>Cum doloribus iure perferendis ex voluptas minima qui facere, totam deleniti id harum rerum maxime odit, in aliquid tempore commodi sint tempora aspernatur architecto consequatur aut. Molestiae eaque delectus sequi!</div>
            <div>Laudantium corporis consequuntur beatae possimus neque debitis tempora enim error sint, officia odit inventore tenetur facilis aut nulla ducimus distinctio ipsam cupiditate, quos deserunt! Autem placeat labore laudantium nihil qui!</div>
            <div>Modi id praesentium cumque repudiandae, alias, dicta assumenda neque eum quidem iste, dignissimos iusto in! Explicabo maxime accusantium ab, cum officia accusamus fuga, libero, consectetur sequi impedit expedita provident nostrum.</div>
            <div>Corrupti ipsam sit, libero est laudantium error nobis tempore aspernatur ex minima temporibus sequi optio. Repudiandae velit earum dolor fuga. Soluta pariatur voluptatibus numquam accusantium, vero necessitatibus animi laboriosam consequatur.</div>
            <div>Maxime adipisci excepturi minus quo, in mollitia saepe officia reprehenderit accusamus assumenda, nisi obcaecati labore. Unde recusandae incidunt debitis excepturi, quod quo ducimus eligendi molestias voluptate qui amet mollitia sunt.</div>
            <div>Dolor suscipit alias qui eaque similique porro beatae explicabo esse voluptate ratione impedit enim, necessitatibus molestias minus, veritatis dolorem soluta blanditiis sunt quae iure sit illo vitae totam omnis? Nisi.</div>
            <div>Sunt ut fugit adipisci, labore alias placeat modi ratione eaque ipsa magni incidunt illo porro unde animi saepe veniam, fugiat atque, explicabo omnis nulla! Quo, adipisci cumque? Porro, maiores fugiat.</div>
            <div>Dolorem iure repellat nihil unde vero maxime facere architecto modi asperiores id, voluptatum iste earum accusamus quibusdam sint. Debitis ratione amet perspiciatis omnis ad fugit deleniti quae, obcaecati odit ab.</div>
            <div>Mollitia iure aspernatur nesciunt veniam itaque maiores minus laborum impedit, sapiente nostrum iste corrupti tenetur consectetur doloremque, eligendi ut optio totam delectus error veritatis inventore soluta animi. Vitae, facere minus?</div>
            <div>Aliquam fugiat id repellat non temporibus perferendis natus dolor vel voluptas necessitatibus, facere aut? Alias nihil rerum asperiores laboriosam voluptatem quod impedit. Ea ad autem magnam earum ut nihil labore!</div>
            <div>Et nihil obcaecati rerum dolor quod, aliquid repudiandae quidem tempora odio vero velit, natus accusamus possimus amet tenetur voluptatum reiciendis maiores praesentium quaerat dicta qui nulla aut sapiente dolore! Optio.</div>
            <div>Mollitia numquam doloremque neque sunt qui vero recusandae. Labore deserunt iure fuga hic natus omnis minus molestias sed doloremque! Architecto molestiae omnis laudantium esse voluptatem voluptas est error placeat doloribus.</div>
            <div>Ullam possimus minus, harum pariatur asperiores adipisci minima beatae doloremque facere nulla dignissimos, exercitationem corrupti esse aperiam cum vitae! Voluptates, porro deserunt nemo est sunt dicta eius dolorum fuga quos!</div>
        </li>
        <li>
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, odio ratione. Odit recusandae, aliquam facere neque, praesentium corrupti expedita provident id odio, repudiandae laborum impedit perspiciatis deserunt saepe est inventore.</div>
            <div>Molestias, asperiores quia ad repudiandae vero voluptas incidunt repellendus, nobis, minus in adipisci? Ex accusantium obcaecati praesentium harum minus numquam, soluta eligendi blanditiis alias, quisquam culpa. Dolores deserunt ea tenetur.</div>
            <div>Facere mollitia animi quod culpa in quibusdam! Animi voluptas quis aspernatur laudantium suscipit quisquam minima. Debitis, reprehenderit eum delectus deleniti, odio alias soluta explicabo ex necessitatibus possimus amet quibusdam sit?</div>
            <div>Quidem, atque! Iusto tempore labore pariatur culpa repellat ullam hic velit magni, asperiores exercitationem commodi modi odio ad libero explicabo a unde consectetur optio dolorem itaque, saepe id. Consequuntur, odio!</div>
            <div>Voluptatum ab quasi obcaecati inventore nesciunt placeat atque numquam voluptates facere libero esse odio, veritatis ratione ea nisi magnam nostrum eligendi! Explicabo dolore ullam voluptatum, a nihil soluta facilis earum.</div>
            <div>Culpa soluta doloribus eaque nobis. Excepturi dolorum nisi non, nulla ex doloribus, voluptates perferendis, cum a consequuntur minima amet sit adipisci culpa eum officia modi ipsum iure expedita! Rerum, tenetur?</div>
            <div>Fugit distinctio, commodi deleniti tempora dicta eos nemo veniam quas earum minima, eaque voluptate nobis? A, non ipsam. Tempora quasi quisquam culpa deleniti nesciunt accusamus exercitationem. Dignissimos possimus velit doloremque?</div>
            <div>Praesentium voluptatum ea obcaecati rerum omnis, deleniti ab ducimus. Itaque at praesentium incidunt, nemo fuga placeat exercitationem aliquam nam deleniti expedita pariatur rerum fugit ipsum, repudiandae magni aperiam ad voluptate.</div>
            <div>Unde commodi natus molestias deserunt harum soluta vero. Cumque, libero deserunt, tempora vero, enim hic veritatis quod neque laudantium blanditiis ipsum explicabo provident doloribus dignissimos porro aut nihil non architecto.</div>
            <div>Sunt quos totam, assumenda consequuntur dignissimos, doloribus itaque nihil deleniti omnis quis corporis. Quas aliquam eos laboriosam, at autem ex unde ad veniam, eligendi nostrum modi rerum blanditiis facere consequuntur?</div>
            <div>Veritatis consequuntur veniam beatae officia odit quasi excepturi quibusdam. Sed debitis mollitia temporibus dolorum ad cum reprehenderit neque sit natus, animi vitae, distinctio, laboriosam modi inventore quia provident iste laudantium!</div>
            <div>Rerum voluptate magni possimus hic harum repellat atque voluptatem cupiditate esse aspernatur! Laborum voluptate mollitia similique blanditiis voluptates doloribus voluptatum maxime ab! Eum, rerum debitis est incidunt fuga illo ipsum!</div>
            <div>Aliquam perspiciatis in ex. Soluta rerum cupiditate libero qui tempora alias. Distinctio adipisci reiciendis minus quas eum nobis? Maxime accusamus repellat eos cum corporis corrupti veniam quam nisi hic vitae.</div>
            <div>A perspiciatis porro asperiores reiciendis incidunt adipisci, similique debitis earum explicabo modi cum voluptates, voluptatum ea quia deserunt voluptatem ut dignissimos ipsa veritatis distinctio eaque? Atque autem iure fugiat quae?</div>
            <div>Molestias magni in rem consectetur mollitia nostrum! At iste quo tenetur obcaecati, nesciunt dolorum cupiditate aut eos ipsum amet vitae rerum, deserunt nisi fugit eum perferendis provident ab corrupti veritatis!</div>
            <div>Perspiciatis explicabo dolor modi numquam, earum repellendus non laudantium minima eos consectetur similique ea provident, a placeat voluptatum. Molestias, laudantium! Similique ab molestiae, dolorem pariatur deserunt ipsa! Asperiores, blanditiis mollitia.</div>
            <div>Repellat dolor consequuntur repudiandae sint, voluptatibus molestiae, odit sequi voluptates distinctio at quam in harum? Voluptatibus nulla molestiae quo modi quibusdam reiciendis praesentium distinctio pariatur similique. Quasi deserunt ea esse?</div>
            <div>Tenetur ab cumque ullam aperiam veniam numquam laudantium modi vero amet doloribus ipsam eveniet a corporis, quod quae praesentium animi facilis ducimus aliquid atque? Accusantium porro quos similique laboriosam atque?</div>
            <div>Debitis rerum quibusdam eum voluptatem amet sed officia sint sequi? Error sed, quisquam, tenetur dolorem deserunt voluptatem voluptatibus soluta incidunt porro, velit minima aut veritatis odio sunt consequatur cum illo.</div>
            <div>Dolores modi praesentium consectetur quis recusandae quae corrupti, rem repellat illum error mollitia fugit molestias cum ipsum magnam obcaecati officiis dolorem voluptatum, animi alias in iure. Dicta doloribus harum qui.</div>
        </li>
        <li>
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita molestiae dolorem possimus veniam fugit neque reiciendis consequatur, rem culpa quibusdam atque officia fugiat, hic minus quasi iure consequuntur ipsa libero.</div>
            <div>Deserunt cupiditate, distinctio cumque, ex doloremque impedit magni possimus minima ad quidem id a aliquam, quam odio animi corporis eveniet laboriosam ducimus dolore consequuntur. Quod excepturi tempora doloribus tempore reprehenderit.</div>
            <div>Voluptatum obcaecati commodi ratione consectetur. Accusamus modi soluta cumque cupiditate minus quia ratione aspernatur numquam dolor vero! Repellat facilis fugiat odit quas atque qui velit, repellendus fuga dignissimos labore eos?</div>
            <div>Pariatur aperiam ipsum, consequuntur laboriosam quasi temporibus, amet quos accusantium quo aspernatur eius. Fugit consequuntur vel quisquam rerum, earum velit illum suscipit consequatur laborum natus minus mollitia, excepturi eum ipsam.</div>
            <div>Nostrum impedit ducimus exercitationem tempore illum itaque porro delectus quas similique cum quis, dolorem vero expedita sed? Tempore labore nisi asperiores culpa eligendi et impedit a excepturi! Voluptate, corporis aspernatur?</div>
            <div>Excepturi temporibus reprehenderit eum quo. Saepe ex tempore laudantium. Eveniet culpa esse omnis cupiditate ipsa eaque aut eum ut voluptatibus, suscipit adipisci aliquid quas quos, quae magni iste quibusdam minus!</div>
            <div>Officia culpa sunt fugit, neque tempora voluptatem beatae perferendis accusantium fuga, facere ducimus eius error dicta earum reprehenderit, animi commodi. Perspiciatis nulla vel dolorum. Consequatur id repellendus dolorum ipsa architecto!</div>
            <div>Sit iure dolore, et blanditiis magnam non nemo hic aperiam commodi quidem, explicabo ipsam incidunt voluptatem quae aliquid? Dolor vel recusandae laborum expedita odit nisi inventore beatae illo, eveniet voluptatum!</div>
            <div>Facere eaque aliquid laudantium quis harum, corporis sed quo dolore soluta ut, fugit accusantium, temporibus nulla minima. Possimus atque cum exercitationem ea sed, ex quisquam ducimus reprehenderit? Quod, eaque id?</div>
            <div>Placeat hic ullam similique eos sed ratione velit, temporibus asperiores nisi consequatur sint accusamus molestias sunt magni nemo fugiat neque inventore doloremque laborum voluptatibus possimus aliquam? Atque voluptates est pariatur!</div>
            <div>Quia minus expedita aperiam adipisci possimus nostrum mollitia aliquam deleniti dolore, laborum labore autem tempora veniam velit tempore temporibus. Nulla, doloremque? Error odio nesciunt, aliquid est explicabo illo saepe perspiciatis!</div>
            <div>Ipsa repellat eaque, deserunt est tempora minus mollitia beatae facilis maiores aut nostrum perspiciatis expedita dolore voluptate impedit fuga voluptas veritatis. Officia vitae unde est et placeat eligendi quae mollitia.</div>
            <div>Esse sit eos non consequuntur nesciunt error ut sed corporis ad culpa. Magni voluptatibus magnam saepe, nam, consequuntur suscipit quidem ipsa dolorum cum incidunt esse cupiditate vero amet, quas soluta?</div>
            <div>Earum sed voluptate autem minima sequi, quam impedit fugit quibusdam, maiores dolor provident, voluptas ea quisquam illo? Explicabo, repellendus sunt eum eligendi eaque quos voluptatibus saepe, veritatis soluta adipisci totam!</div>
            <div>Sed impedit ipsum quae excepturi iusto laborum deleniti sapiente incidunt, labore eaque architecto molestias ad animi corrupti voluptatibus nisi hic laboriosam ullam non minima. Temporibus nihil sit soluta sunt? Amet.</div>
            <div>Earum quibusdam dicta tempora libero deleniti, repellat illum dolores accusantium aut! Consequatur velit reprehenderit voluptas quibusdam facilis voluptate eveniet natus error tempore laboriosam autem et sapiente, aut, porro ut officiis!</div>
            <div>Nisi velit provident ad distinctio corporis fuga tempore, ea enim totam tenetur tempora nam facilis unde debitis natus quae ipsam architecto modi? Consequatur id velit iure doloremque maxime! Eius, quos.</div>
            <div>Nulla obcaecati odio similique ea illo quaerat modi vero officia, eaque consequuntur, beatae nisi explicabo repudiandae exercitationem aut! Id quia sapiente qui nam commodi quidem amet cumque deserunt libero nihil.</div>
            <div>Adipisci, ab perspiciatis porro voluptatum ad magni aspernatur ratione in vitae? Facere, rerum maiores perspiciatis, explicabo aperiam officiis, dolorum accusantium voluptatum assumenda earum nostrum qui? Exercitationem labore ipsa iure tenetur?</div>
            <div>Eaque iusto iure commodi aspernatur dolore sunt fugit, numquam reprehenderit dicta autem quibusdam cum voluptatum. Totam perferendis, nemo placeat libero deleniti tempora aperiam molestiae sint quidem repellendus corporis quaerat ipsam!</div>
        </li>
      </ul>
    </div>
    <script>
      class WaterMark {
        constructor(options = {}) {
          this.init(options);
        }
        init(options = {}) {
          Object.assign(
            this,
            {
              text: 'water mark', // 水印内容
              dom: document.body, // 水印父节点
              fontSize: 24, // 字号
              color: 'rgba(200, 200, 200, 0.5)',
              width: 500, // canvas width
              height: 500, // canvas height
              fixed: false, // 水印固定位置
              zIndex: null,
              img: null,
              pushDom: true, // true 添加至尾部 false unshift // 头部
            },
            {
              canvasImage: null,
            },
            options
          );
        }
        set(text = this.text, options) {
          if (options) Object.assign(this, options);
          this.text = text;
          this.addDom(this.drawCanvas());
        }
        setImg(img = this.img) {
          if (!img) throw new Error('Please set img!!!');
          this.img = img;
          this.addDom(img);
        }
        drawCanvas() {
          let can = document.createElement('canvas');
          /*修改参数可调整密度*/
          can.width = this.width;
          can.height = this.height;
          /*修改参数可调整密度End*/
          let cans = can.getContext('2d');
          cans.rotate((-30 * Math.PI) / 180);
          cans.translate(-50, can.height / 2);
          cans.font = this.fontSize + 'px Arial';
          cans.fillStyle = this.color;
          cans.textAlign = 'left';
          cans.textBaseline = 'Middle';
          cans.fillText(
            this.text,
            40 || (this.width - this.fontSize * this.text.length) / 2,
            this.height / 4
          );
          this.canvasImage = can.toDataURL('image/png');
          return this.canvasImage;
        }
        addDom(img) {
          let waterMarkDom = this.getWaterMarkDom();
          if (waterMarkDom) {
            waterMarkDom.style.background = 'url(' + img + ') left top repeat';
            this.dom.appendChild(div);
          } else {
            let div = document.createElement('div');
            div.setAttribute('water-mark', true);
            div.style.pointerEvents = 'none';
            div.style.position = 'absolute';
            div.style.top = '0px';
            div.style.left = '0px';
            console.log(this.dom.style.position === '');
            if (this.dom.style.position === '') {
              // document.body 若不设置 relative，heigh 100% 只有100vh
              this.dom.style.position = 'relative';
            }
            // !!! FIXED dom 添加在最后，不需要 z-index, 防止影响其他元素 z-index
            div.style.zIndex = this.zIndex;
            // !!! FIXED 采用%优化，去掉 resize 重绘
            // div.style.width = document.documentElement.clientWidth  + 'px'
            // div.style.height = document.documentElement.clientHeight  + 'px'
            div.style.width = '100%';
            div.style.height = '100%';
            div.style.background = 'url(' + img + ') left top repeat';
            if (this.pushDom) this.dom.appendChild(div);
            else {
              this.dom.insertBefore(div, this.dom.firstChild);
            }
          }
        }

        getWaterMarkDom() {
          // lastChild 不一定是水印，可能是其他方法添加的元素
          let waterMarkDom = null;
          this.dom.childNodes.forEach((v) => {
            if (v.tagName === 'DIV' && v.getAttribute('water-mark'))
              waterMarkDom = v;
          });
          return waterMarkDom;
        }
        remove() {
          let waterMarkDom = this.getWaterMarkDom();
          if (waterMarkDom) this.dom.removeChild(waterMarkDom);
        }
      }
      let waterMark = new WaterMark({
        pushDom: false,
      });
        waterMark.setImg(
          'https://images.cnblogs.com/cnblogs_com/zc-lee/2003095/o_210721071151%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210621132229.jpg'
        );
      for (let i = 0; i < document.getElementsByTagName('li').length; i++) {
        waterMark.set('water mark li ' + i, {
          dom: document.getElementsByTagName('li')[i],
          color: ['#fff','#00aaee','#ff0036','#ddd'][i],
        });
      }
    </script>
  </body>
</html>
